<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>绑定样式</title>
    <script src="../js/vue.js"></script>
    <style>
      .basic {
        width: 400px;
        height: 100px;
        border: 1px solid #000000;
      }

      .happy {
        border-color: red;
        background-color: orange;
      }

      .sad {
        border-color: darkslategrey;
        background-color: dimgrey;
      }

      .normal {
        background-color: skyblue;
      }

      .item1 {
        background-color: olivedrab;
      }

      .item2 {
        text-shadow: 2px 2px 10px orange;
      }

      .item3 {
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <!--
        绑定样式：
            1.class样式
                :class="xxx" xxx可以是字符串、对象、数组
                    字符串写法适用于：类名不确定，要动态获取；
                    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定；
                    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
            2.style样式
                :style="{fontSize: xxx}"其中xxx是动态值
                :style="[a, b]"其中a、b是样式对象
    -->
    <div id="root">
      <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
      <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
      <br />
      <br />

      <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
      <div class="basic" :class="classArr" @click="">{{name}}</div>
      <br />
      <br />

      <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
      <div class="basic" :class="classObj" @click="">{{name}}</div>
      <br />
      <br />

      <!-- 绑定style样式（对象/数组） -->
      <!-- <div class="basic" :style="{fontSize: fSize + 'px'}">{{name}}</div> -->
      <div class="basic" :style="styleObj">{{name}}</div>
      <!-- <div class="basic" :style="[styleObj, styleObj2]">{{name}}</div> -->
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#root",
      data: {
        name: "item",
        mood: "normal",
        classArr: ["item1", "item2", "item3"],
        classObj: {
          item1: true,
          item2: true,
        },
        // fSize: 40,
        styleObj: {
          fontSize: "40px",
          color: "red",
        },
        styleObj2: {
          backgroundColor: "orange",
        },
      },
      methods: {
        changeMood() {
          const arr = ["normal", "happy", "sad"];
          const fArr = arr.filter((item) => item !== this.mood);
          this.mood = fArr[Math.floor(Math.random() * 2)];
        },
      },
    });
  </script>
</html>
